{% extends 'base.html' %}
{% block header %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/base.css') }}">
{% endblock header %}

{% block content %}
    <!-- Main content -->
    <div class="content">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#" data-toggle="tab" aria-expanded="true">{{ title }}</a></li>
            </ul>
            <div class="box-header">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">添加用户
                </button>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">添加{{ title }}</h4>
                            </div>
                            <div class="modal-body">
                                <form class="form-horizontal" id="defaultForm">
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">用户名</label>
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control" placeholder="用户名" id="username"
                                                   name="username">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">邮箱</label>
                                        <div class="col-xs-8">
                                            <input type="email" class="form-control" placeholder="邮箱" id="email"
                                                   name="email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">密码</label>
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control" placeholder="密码" id="password"
                                                   name="password">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-3 col-xs-8">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" id="status" name="status" value="1"/> 激活
                                                </label>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <div class="col-sm-offset-3 col-sm-10">
                                            <button type="button" class="btn btn-success" id="myDiv">添加</button>
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body no-padding">
                <table class="table table-hover table-bordered" id="table01">
                    <tbody>
                    <tr>
                        <th style="width: 15px;"><input type="checkbox"></th>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>添加时间</th>
                        <th style="width:180px; text-align: center">操作</th>
                    </tr>
                    {% for user in result %}
                        <tr>

                            <td><input type="checkbox"></td>
                            <td>{{ user.id }}</td>
                            <td>{{ user.name }}</td>
                            <td>{{ user.addtime|string_time }}</td>
                            <td>
                                <button class="btn btn-dropbox btn-xs js-edit"
                                        data-href="{{ url_for('admin.edituser',id=user.id) }}">编辑
                                </button>
                                <button class="btn btn-danger btn-xs js-del"
                                        data-href="{{ url_for('admin.deluser',id=user.id) }}">删除
                                </button>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- 表单 -->
    </div>
{% endblock content %}
{% block footer %}
    {#    验证表单#}
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
    <script src="{{ url_for('static',filename='js/sduser.js') }}"></script>

{% endblock footer %}
{% block js %}

    <script>
        $(function () {
            $("#myDiv").click(function () {
                // 验证表单未输入或者状态不通过是不允许提交
                $('#defaultForm').bootstrapValidator('validate');
                if (!$('#defaultForm').data('bootstrapValidator').isValid()) return;

                // 获取表单的字段和值并返回Json格式
                var datalin = {};
                $('#defaultForm input[name]').each(function () {
                    datalin[this.getAttribute('name')] = this.value;
                });
                var data = {data: JSON.stringify(datalin)}
                console.log(JSON.stringify(data));
                $('#defaultForm').serializeArray()
                // 通过ajax方式提交数据
                $.ajax({
                    url: '{{ url_for('admin.adduser') }}',
                    type: 'POST',
                    data: data,
                    dataType: 'json',
                    success: function (res) {
                        $('#exampleModal').modal('hide')
                        swal(res.result, "", "success")
                        console.log(0)
                    },
                    error: function (res) {
                        $('#exampleModal').modal('hide')
                        swal("失败", "", "error")
                        console.log(1)
                    }

                })
            })
        });
    </script>
{% endblock js %}